<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script src="vue/Vue.js"></script>-->
<!--    <script src="vue/axios.min.js"></script>-->

    <script src="js/commonJs.js"></script>
</head>
<body>
<div id="app">
    {{ message_str }}
</div>


<div id="app-2">
  <span :title="message" v-if="seen">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

    <p>{{message}}</p>
    <p>{{reverse_message}}</p>


    <input v-model="message"/>
    <div v-for="todo in todos" @click="buttonEvent(todo.text)">
        {{todo.text}}
    </div>

    <todo-item v-on:custom-click="buttonEvent('冒个泡111')"></todo-item>


    <textarea>{{permissions}}</textarea>
    <button @click="getPermission(1)">获取权限</button>

</div>



<script type="text/javascript">

    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        template:
            `
            <div><p>这是个待办项</p>
            <button v-on:click="$emit(\'custom-click\')">冒个泡</button></div>
            `
    })

    var app = new Vue({
        el: '#app',
        data: {
            message_str: 'Hello Vue!'
        },
        created: function(){
            console.log('app被创建');
        },
        destroyed: function(){
            console.warn('app被销毁');
        },
        watch:{
            message_str: function (newValue, oldValue) {

                alert('message_str旧值为：'+oldValue +'; 新值为：' + newValue);
            }
        }
    });

    // app.$destroy();

    // app.$watch('message_str', function (newValue, oldValue) {
    //
    //     alert('message_str旧值为：'+oldValue +'; 新值为：' + newValue);
    // })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString(),
            seen : true,
            todos:[{text:"start to lean Vue"}, {text:"Vue experience level up"},{text:"get the core technology"}],
            permissions: ''
        },
        methods:{
            buttonEvent: function (str) {
                alert(str);
            },
            getPermission: function(userId){
                // this.permissions = '123';


                axios.get('/permission/'+userId)
                    .then(response => (this.permissions = response.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });


            }
        },
        computed:{
            reverse_message: function(){
                return this.message.split('').reverse().join('');
            }
        }
    });

    // app2.$destroy();

</script>
</body>
</html>